<!DOCTYPE html>
<html>
<head>
    <title>Leaflet boundary canvas plugin example (multipolygon with holes)</title>

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

    <script src="../src/BoundaryCanvas.js"></script>
    
    <style>
        html, body, #map {
            height: 100%;
            margin: 0px;
        }
    </style>    
</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">

    var geom = {"type":"MultiPolygon","coordinates":[
        [[[36.375733,56.475540], [37.661133,56.699837], [39.089356,56.402508], [39.572754,55.627130], [39.155274,55.051062], [38.089600,54.817004], [36.672364,54.886732], [35.727541,55.377699], [35.815432,56.072117], [36.375733,56.475540]],
         [[37.488099,55.890415], [37.372743,55.810070], [37.380983,55.728008], [37.485353,55.600703], [37.677613,55.577371], [37.825929,55.639560], [37.839662,55.763641], [37.820436,55.837900], [37.589723,55.905846], [37.488099,55.890415]]],
        
        [[[41.539307,57.370676], [43.077393,57.471439], [43.813477,57.329104], [43.692627,56.572696], [43.352051,55.664406], [41.978760,55.321357], [40.759278,55.352667], [40.111084,55.874975], [40.187989,56.536291], [40.627442,56.958829], [41.539307,57.370676]]]
    ]};

    var map = L.map('map').setView([55.7, 38], 7),
        osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttribution = 'Map data &copy; 2012 OpenStreetMap contributors';

    var osm = L.TileLayer.boundaryCanvas(osmUrl, {
        boundary: geom, 
        attribution: osmAttribution,
        trackAttribution: true
    }).addTo(map);

    </script>
</body>
</html>